.dk-select{
  display:inline-block;
  position:relative;
  z-index:20;
}
.selected{
  background-color:#20a0ff;
  color:white;
}
.dk-select-container{
  position:relative;
}
.dk-select-icon{
  position:absolute;
  text-align: center;
  width:35px;
  line-height: 35px;
  top:0;
  right:0;
  font-size:14px;
}
.dk-select-icon-active{
  animation: iconActive 0.3s;
  transform:rotate(180deg);
}
@keyframes iconActive{
  from{
    transform: rotate(0);
  }
  to{
    transform:rotate(180deg);
  }
}
.dk-select-icon-done{
  animation: iconDown 0.3s;
  transform:rotate(0);
}
@keyframes iconDown{
  from{
    transform: rotate(180deg);
  }
  to{
    transform:rotate(0);
  }
}
.dk-select-input{
  display: block;
  padding:3px 35px 3px 10px;
  border:1px solid #bfcbd9;
  border-radius: 4px;
  margin:0;
  line-height: 1;
  height:36px;
}
.dk-select-input:hover{
  border-color:#8391a5;
}
.dk-select-input:focus{
  border-color:#20a0ff;
}
.dk-select-menu{
  max-height: 200px;
  overflow-y: auto;
  position:absolute;
  top:40px;
  left:0;
  right:0;
  border:1px solid #ccc;
  border-radius:3px;
  padding:5px 0;
  background-color:white;
  transform-origin:center top 0;
  box-shadow: 0px 1px 1px 1px #eee;
}
.select-enter-active{
  animation: moveDown 0.2s linear;
}
@keyframes moveDown {
  from{
    transform:rotateX(90deg);
  }
  to{
    transform:rotateX(0deg);
  }
}
.select-leave-active{
  animation: moveUp 0.1s ease-out;
}
@keyframes moveUp {
  from {
    transform:rotateX(0deg);
  }
  to{
    transform:rotateX(-90deg);
  }
}
.dk-select-menu ul{
  padding:0;
  margin:0;
  list-style: none;
}
.dk-select-menu ul li{
  line-height:30px;
  font-size:14px;
  padding-left:10px
}
.dk-select-menu.show{
  display:block;
}


/*活动按钮*/
.dk-slide-radio{
  display: inline-block;
  width:60px;
  height:30px;
  /*border-radius:15px;*/
  /*background-color:#ccc;*/
  position:relative;
  overflow: hidden;
}
.dk-radio-true,.dk-radio-false{
  width:60px;
  height:30px;
  border-radius:15px;
  position:absolute;
}
.dk-radio-true{
  z-index:2;
}
.dk-radio-false{
  z-index:1;
}
.dk-radio-right,.dk-radio-left{
  position:absolute;
  width:24px;
  height:24px;
  border-radius:12px;
  background:white;
  top:3px;
}
.dk-radio-right{
  right:3px;
}
.dk-radio-left{
  left:3px;
}

/*checkbox多选框*/
.dk-checkbox-wrapper{
  margin-right:10px;
}
.dk-checkbox{
  display:inline-block;
  position: relative;
  box-sizing:border-box;
  height:20px;
  line-height:20px;
}
.dk-checkbox-icon{
  display: inline-block;
  width:18px;
  height:18px;
  line-height:18px;
  text-align:center;
  color:white;
  border-radius:3px;
  border:1px solid #bfcbd9;
  background-color:white;
  font-size:1px;
  transition: all 0.3s;
  vertical-align: middle;
}
.dk-checkbox-icon:hover{
  border-color:#20a0ff;
}
.dk-checkbox-checked{
  background-color:#20a0ff;
  border-color:#20a0ff;
}
.dk-checkbox{
  display:none;
}
.dk-checkbox-content{
  margin-left:7px;
  display:inline-block;
  font-size:15px;
  vertical-align: middle;
  user-select:none;
}

/*rangeInput*/
.dk-range-wrapper{
  /*margin:1000px 200px;*/
  margin:50px 0;
}
.dk-range{
  position:relative;
  width:400px;
  height:10px;
  border-radius:5px;
  background-color:#ccc;
  display:inline-block;
}
.dk-ranged{
  position:absolute;
  top:0;
  left:0;
  height:10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  width:100px;
  background-color:red;
}
.dk-range-circle{
  display:inline-block;
  width:20px;
  height:20px;
  border-radius:10px;
  background-color:red;
  position: absolute;
  top:-5px;
  left:95px;
  z-index:3;
}
.dk-range-circle:hover{
  background-color:black;
}
.dk-range-tip{
  width:30px;
  height:35px;
  background-color:#bbb;
  position:absolute;
  top:-50px;
  left:90px;
  color:white;
  text-align: center;
  line-height:35px;
  opacity:0.3;
  user-select: none;
}
.dk-range-tip span:after{
  content:"";
  border-right:5px solid transparent;
  border-left:5px solid transparent;
  border-top:10px solid #bbb;
  position:absolute;
  left:10px;
  bottom:-10px;
}
.dk-range-input{
  display:inline-block;
  margin-left:30px;
}
.dk-range-input input{
  height:36px;
  padding:6px 12px;
  width:auto;
  border:1px solid #bfcbd9;
  border-radius: 4px;
  width:50px;
}
.dk-range-input input:hover{
  border-color:#8391a5;
}
.dk-range-input input:focus{
  border-color:#20a0ff;
  outline: none;
}
/*去掉input[type=number]默认的加减号*/
input[type='number'] {
  -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*radio单选框*/
.dk-radio-wrapper{
  margin-right: 10px;
  display: inline-block;
  position: relative;
}
.dk-radio-icon{
  display:inline-block;
  vertical-align: middle;
  width:18px;
  height:18px;
  border-radius:15px;
  border:1px solid #bfcbd9;
  transition: all 0.3s;
  position: relative;
  box-sizing: border-box;
}
.dk-radio-icon:hover{
  border-color:#20a0ff;
}
.dk-radio-checked{
  background-color:#20a0ff;
  border-color:#20a0ff;
}
.dk-circle{
  display:inline-block;
  box-sizing: border-box;
  width:6px;
  height:6px;
  border-radius:4px;
  position: absolute;
  top:5px;
  left:5px;
  background-color:white;
}
.dk-radio{
  display:none;
}
.dk-radio-content{
  display:inline-block;
  margin-left:8px;
  vertical-align: middle;
  user-select:none;
  font-size:14px;
}

/*input输入框*/
.dk-input{
  height:36px;
  border-radius:4px;
  border:1px solid #bfcbd9;
  padding:3px 0 3px 10px;
  outline:none;
  line-height:30px;
  width:100%;
}
.dk-input:hover{
  border-color:#8391a5;
}
.dk-input:focus{
  border-color:#20a0ff;
}
/*滑动选框*/
/*.dk-slide-input{
  display: inline-block;
}
.dk-input{
  position:relative;
  width:300px;
  height:10px;
  background-color:#ccc;
  border-radius:5px;
}
.dk-input-range{
  display:block;
  width:50%;
  height:10px;
  border-radius:5px;
  background-color:blue;
}
.dk-slide-circle{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:10px;
  background-color:red;
  left:20px;
  top:-5px;
}*/
